<template>
  <div>
    <el-card>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/userManage' }">用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>设备管理</el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    <el-card class="m-t">
      <!-- 操作按钮 -->
      <!--<el-row type="flex" justify="start" class="m-b">
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-circle-plus-outline"
          @click="addDevice"
        >添加
        </el-button>
        <el-button
          type="danger"
          size="mini"
          icon="el-icon-delete"
          @click="batchRemove"
        >批量移除
        </el-button>
      </el-row>-->
      <el-table stripe :data="tableData"
                @selection-change="handleSelectionChange"
                style="width: 100%" size="small">
        <el-table-column type="selection" width="55"/>
        <el-table-column type="index" label="编号" width="100" align="left" :index="table_index"></el-table-column>
        <el-table-column prop="deviceId" label="设备ID" sortable/>
        <el-table-column prop="name" label="设备名称" sortable/>
        <el-table-column prop="type" label="设备类型"/>
        <el-table-column prop="state" label="状态">
          <template #default="{ row }">
            <!--updateFun(row)updateUsersFun(row)-->
            <el-tag :type="row.state | stateFilter">{{ row.state | stateFil}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="设备部署地址"/>
        <el-table-column prop="description" label="描述"/>
        <el-table-column
          label="操作"
          width="160"
          fixed="right"
          align="center"
        >
          <template #default="{ row }">
            <el-button type="primary" size="mini" @click="viewDevieFun(row)"><i class="el-icon-view"></i> 查看数据</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pages-btn-box m-t">
        <el-pagination
          :current-page="page.current"
          :page-size="Number(page.size)"
          layout="prev, pager, next, jumper"
          :total="Number(page.total)"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <el-row style="text-align: center;margin-top:20px;">
      <el-button type="default" icon="el-icon-back" @click="goBack">返 回</el-button>
    </el-row>
  </div>
</template>

<script>
  import {formatDate} from "@/utils/utils";
  import {userDevice} from "@/api/deviceManage";
  import store from "@/store/modules/user";

  export default {
    name: "Index",
    components: {

    },
    data() {
      return {
        tableData: [],
        page: {
          current: 1,
          size: 10
        },
        formData: {},
        showDialogEdit: false,
        searchForm: {
          search: ""
        },
        userId: "",
        typeList: [{name: "IEQ"}, {name: "PMS"}, {name: "OPT"}],
        stateList: [
          {value: "ONLINE", name: "在线"},
          {value: "OFFLINE", name: "离线"},
          {value: "NEW", name: "入库"},
          {value: "DEPLOYED", name: "已部署"}
        ],
        selectArr: [],
        userInfo: store.state.userInfo,
        homePath: "/userManage",
        curr: 1,
        search: {}
      };
    },
    filters: {
      stateFil(val) {
        switch (val) {
          case "ONLINE":
            return "在线";
          case "OFFLINE":
            return "离线";
          case "NEW":
            return "入库";
          case "DEPLOYED":
            return "已部署";
          default:
            break;
        }
      },
      stateFilter(state) {
        const stateMap = {
          ONLINE: "success",
          OFFLINE: "danger",
          NEW: "",
          DEPLOYED: "warning"
        };
        return stateMap[state];
      }
    },
    created() {
      this.userId = this.$route.query.userId;
      this.curr = this.$route.query.page;
      this.search = this.$route.query.search;
      this.homePath = `${this.homePath}?page=${this.curr}&search=${this.search}`;
    },
    mounted() {
      this.userId = this.$route.query.userId;
      this.getList();
    },
    methods: {
      table_index(index) {
        return (this.page.current - 1) * this.page.size + index + 1
      },
      dateFormat(row, column) {
        if (column.property === "createTime") {
          return formatDate(new Date(row.createTime));
        } else if (column.property === "updateTime") {
          return formatDate(new Date(row.updateTime));
        }
      },
      handleCurrentChange(val) {
        this.page.current = val;
        this.getList();
      },
      changeVisibleEdit(e) {
        this.showDialogEdit = e;
      },
      goBack() {
        this.$router.push(this.homePath);
      },
      addDevice() {
        // state.editType = 1;
        this.formData = {};
        this.changeVisibleEdit(true);
      },
      //表格选择事件
      handleSelectionChange(val) {
        this.selectArr = val;
      },
      viewDevieFun(row) {
        var deviceId = row.deviceId;
        var name = row.name;
        var params = { deviceId, name };
        var path = "";
        if (row.type === "IEQ") {
          path = "/deviceManage/IEQViewData";
        } else if (row.type === "OPT") {
          path = "/deviceManage/OPTViewData";
        } else if (row.type === "PMS") {
          path = "/deviceManage/PMSViewData";
        }
        let routeData = this.$router.resolve({
          path,
          query: params
        });
        window.open(routeData.href, "_blank");
      },
      batchRemove() {
        if (this.selectArr.length == 0) {
          this.$message("请选择要移除的设备");
          return;
        } else {
          this.$confirm("您确定移除选择的设备吗？", "提示", {
            confirmButtonText: " 确 定",
            cancelButtonText: " 取 消",
            type: "warning",
            confirmButtonClass: "el-icon-check",
            cancelButtonClass: "el-icon-close btn-custom-cancel"
          }).then(() => {
            var deviceList = [];
            for (var i = 0; i < this.selectArr.length; i++) {
              deviceList.push(this.selectArr[i].deviceId)
            }
            const data = {
              userId: this.userId,
              deviceList: deviceList
            };
            delDevice(data)
              .then((res) => {
                this.submitLoading = false;
                if (res["code"] == 200) {
                  this.getList();
                  this.$message.success("移除成功!");
                } else {
                  this.$message(res["msg"]);
                }
              })
          });
        }
      },
      getList(refresh = false) {
        var data = {
          ...this.searchForm,
          userId: this.userId,
          pageNo: this.page.current,
          pageSize: this.page.size
        };
        if (refresh) {
          data.pageNo = 1;
        }
        userDevice(data).then(res => {
          const data = res.value;
          this.tableData = data.values;
          this.page.total = data.total;
        });
      },
      deviceView(row) {
        this.$router.push({
          path: "/deviceManage/deviceView",
          query: {deviceId: row.deviceId}
        });
      },
      deployDevice(row) {
        this.$router.push({
          path: "/deviceManage/deployDevice",
          query: {id: row.deviceId}
        });
      },
      viewData(row) {
        if (row.type === "IEQ") {
          this.$router.push({path: "/deviceManage/IEQViewData", query: {deviceId: row.deviceId, name: row.name}});
        } else if (row.type === "OPT") {
          this.$router.push({path: "/deviceManage/OPTViewData", query: {deviceId: row.deviceId, name: row.name}});
        } else if (row.type === "PMS") {
          this.$router.push({path: "/deviceManage/PMSViewData", query: {deviceId: row.deviceId, name: row.name}});
        }
      },
      changeSearchType(value) {
        if (this.searchForm.type == value) {
          this.searchForm.type = "";
        } else {
          this.searchForm.type = value;
        }
        this.getList();
      },
      changeSearchState(value) {
        if (this.searchForm.state == value) {
          this.searchForm.state = "";
        } else {
          this.searchForm.state = value;
        }
        this.getList();
      }
    }
  };
</script>

<style scoped lang="scss">
  .topLayout {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }

  .inline {
    // max-width: 300px;
    margin: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .input-search {
    width: 260px;
    min-width: 150px;
    margin-right: 20px;
  }

  .flexBox {
    display: flex;

    div {
      margin: 0 5px;
      border: 1px solid #aaa;
      padding: 5px 10px;
      font-size: 12px;
      border-radius: 5px;
      color: #aaa;
      cursor: pointer;
    }

    .selected {
      background-color: #1890ff;
      color: #fff;
    }
  }
</style>
<style>
  .btn-custom-cancel {
    float: right;
    margin-left: 10px;
  }
</style>
